<template>
  <VCharts
    v-if="renderChart"
    :option="options"
    :autoresize="autoResize"
    :style="{ width, height }"
  />
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue';
import VCharts from 'vue-echarts';
import { TitleComponent,DataZoomComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';
import {CanvasRenderer} from "echarts/renderers";
import { GaugeChart ,LineChart, PieChart} from 'echarts/charts';
import { use } from 'echarts/core';
  
  // import { useAppStore } from '@/store';

use([GaugeChart,LineChart,PieChart, GridComponent, DataZoomComponent, TitleComponent, TooltipComponent, CanvasRenderer, LegendComponent])
const props = defineProps({
  options: {
    type: Object,
    default() {
      return {};
    },
  },
  autoResize: {
    type: Boolean,
    default: true,
  },
  width: {
    type: String,
    default: '100%',
  },
  height: {
    type: String,
    default: '100%',
  },
});
// const appStore = useAppStore();
// const theme = computed(() => {
//   if (appStore.theme === 'dark') return 'dark';
//   return '';
// });
const renderChart = ref(false);
// wait container expand
nextTick(() => {
  // setTimeout(() => {
  renderChart.value = true;
    console.log(props.options)
  // },500)
});
</script>

<style scoped lang="scss"></style>
